<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <title>zhuye</title>
    <script src="./font/iconfont.js"></script>
    <link rel="stylesheet" href="./css/zhuye.css">
</head>

<body>
    <div class="tab">
        <div class="tt">
            <img src="./hupu-img/logo.png" class="hupu-logo">
            <div class="tt_box">
                <span>关注</span>
            </div>
            <div class="tt_box">
                <span>推荐</span>
            </div>
            <div class="tt_box">
                <span class="cur">赛事</span>
            </div>
            <div class="tt_box">
                <button onclick="toWorld()" class="world"><span>世界杯</span></button>
            </div>
            <div class="tt_box">
                <span>
                    <a href=".//sousuo.html">
                        <svg class="icon-find " aria-hidden="true">
                            <use xlink:href="#icon-sousuo"></use>
                        </svg>
                    </a>
                </span>
            </div>
        </div>


        
        <div class="tc">
            <div class="gz-top">
                <img src="./hupu-img/guanzhu.jpg" class="gz-top-img">
                <ul>
                    <li>
                        <strong>快去关注你感兴趣的JRs吧!</strong>
                    </li>
                    <li>
                        关注后, 可以在这里查看对方最新发布的帖子
                    </li>
                </ul>
            </div>
            <span class="gz-title">
                <strong>为你推荐</strong>
            </span>


            <div class="gz_Content">
             <div class="gz_content">
                    <div class="gz_content_box_left">
                        <img src="./hupu-img/LPL赛事没品图.jpg" class="gz_content_box_img">
                        <ul>
                            <li>
                                <strong>LPL赛事没品图</strong>
                            </li>
                            <li class="tag">LPL赛事没品图官方账号</li>
                        </ul>
                    </div>
                    <div class="gz_content_box_right">
                        <span class="button">+关注</span>
                    </div>
                </div>
                <ul class="words">
                    <li class="words_content">快落全明星</li>
                    <li class="words_tag">10.4万阅读/34回复</li>
                    <li class="words_content">Lwx诱捕器 </li>
                    <li class="words_tag">16.9万阅读/14回复</li>
                </ul>
            </div>
        </div>





        <div class="tc">
            <div class="TT">
                <div class="title_box">
                    <span class="sh">推荐</span>
                </div>
                <div class="title_box">
                    <span>篮球</span>
                </div>
                <div class="title_box">
                    <span>热榜</span>
                </div>
                <div class="title_box">
                    <span>游戏</span>
                </div>
                <div class="title_box">
                    <span>数码</span>
                </div>
                <div class="title_box">
                    <span>
                        <a href="#">
                            <svg class="icon-find " aria-hidden="true">
                                <use xlink:href="#icon-hengdengyu"></use>
                            </svg>
                        </a>
                    </span>
                </div>
            </div>



            <div class="part">
                <div class="Inf">
                    <div class="inf">
                        <div class="inf-left">
                            <img class="circleImg" src="./hupu-img/保罗头像.jpg">
                            <ul>
                                <li class="uname">克里斯`保罗灬</li>
                                <div class="time">
                                    <li>17小时前</li>
                                </div>
                            </ul>
                        </div>
                        <div class="inf-right">
                            <svg class="icon-inf " aria-hidden="true">
                                <use xlink:href="#icon-gengduo-shuxiang"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="inf_title">这是不是目前足坛25岁以下最强阵容<span class="bl">#虎扑足球神帖#</span></div>
                    <div>
                        <img class="img" src="./hupu-img/阵容.webp">
                    </div>
                </div>
                <ul class="comments">

                    <li class="pc">克里斯`保罗灬:</li>
                    <li class="gq">| @五岳君临天下:左后卫特奥吧</li>
                    <li class="pc">不这么认为都是欧冠冠军,阿方是主力左后卫,还有四个德甲冠军,而且阿方身价高2000w呢</li>
                    <li class="zs">去看35条亮回复></li>
                </ul>

                <div class="Bottom">
                    <div class="zq">
                        <img class="football-logo" src="./hupu-img/足球话题区.webp">
                        <span>足球话题区</span>
                    </div>
                    <nav class="Icon">
                        <ul>
                            <li>
                                <a href="#">
                                    <svg class="icon-bottom-before" style="color:black" aria-hidden="true">
                                        <use xlink:href="#icon-dianzan
                                "></use>
                                    </svg>
                                    <svg class="icon-bottom-after" style="color:black" aria-hidden="true">
                                        <use xlink:href="#icon-dianzan1
                                "></use>
                                    </svg>
                                    <p class="mar">19</p>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <svg class="icon-bottom" style="color:black" aria-hidden="true">
                                        <use xlink:href="#icon-xiaoxi1
                                "></use>
                                    </svg>
                                    <p class="mar">16</p>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <svg class="icon-bottom" style="color:black" aria-hidden="true">
                                        <use xlink:href="#icon-fenxiang_2   
                                "></use>
                                    </svg>
                                    <p class="mar">2</p>
                                </a>
                            </li>

                        </ul>
                    </nav>
                </div>
            </div>
            <div class="part">
                <div class="Inf">
                    <div class="inf">
                        <div class="inf-left">
                            <img class="circleImg" src="./hupu-img/晚安s头像.jpg">
                            <ul>
                                <li class="uname">晚安s</li>
                                <div class="time">
                                    <li >21小时前</li>
                                </div>
                            </ul>
                        </div>
                        <div class="inf-right">
                            <svg class="icon-inf " aria-hidden="true">
                                <use xlink:href="#icon-gengduo-shuxiang"></use>
                            </svg>
                        </div>
                    </div>
                    <span class="inf_title">Uzi这背景在哪里</span>
                    <div>
                        <img class="img" src="./hupu-img/uzi家.webp">
                    </div>
                </div>
                <ul class="comments">

                    <li class="pc">WaitherLee:</li>
                    <li class="pc">乌兹也应该是租房子吧,这种地方的房子他买应该也要肉疼一下的</li>

                </ul>

                <div class="Bottom">
                    <div class="zq">
                        <img class="football-logo" src="./hupu-img/英雄联盟.webp">
                        <span>英雄联盟</span>
                    </div>
                    <nav class="Icon">
                        <ul>
                            <li>
                                <a href="#">
                                    <svg class="icon-bottom" style="color:black" aria-hidden="true">
                                        <use xlink:href="#icon-dianzan
                                "></use>
                                    </svg>
                                    <p class="mar">25</p>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <svg class="icon-bottom" style="color:black" aria-hidden="true">
                                        <use xlink:href="#icon-xiaoxi1
                                "></use>
                                    </svg>
                                    <p class="mar">12</p>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <svg class="icon-bottom" style="color:black" aria-hidden="true">
                                        <use xlink:href="#icon-fenxiang_2
                                "></use>
                                    </svg>
                                    <p class="mar">5</p>
                                </a>
                            </li>

                        </ul>
                    </nav>
                </div>
            </div>

        </div>

        <div class="tc show">
            <div class="Tt">
                <div class="Title_box">
                    <a href="#"><span>主队资讯</span></a>
                </div>
                <div class="Title_box">
                    <a href="#"><span class="ab">NBA</span></a>
                </div>
                <div class="Title_box">
                    <button onclick="toSaicheng()" class="sd"><span>国际足球</span></button>
                </div>
                <div class="Title_box">
                    <a class="cf" href="#"><span>英雄联盟</span></a>
                </div>
                <div class="Title_box">
                    <a href="#"><span>
                            <a href="#">
                                <svg class="icon-find " aria-hidden="true">
                                    <use xlink:href="#icon-hengdengyu"></use>
                                </svg>
                            </a>
                        </span></a>
                </div>

            </div>

            <div class="Box-top">
                <div class="Box">
                    <div class="box-left">
                        <span>森林狼</span>
                        <img src="./hupu-img/森林狼.jpg">
                    </div>
                    <div class="middle">
                        <div class="score">
                            <span class="bs">63</span>
                            <span class="bs">-</span>
                            <span class="bs">64</span>
                        </div>
                        <span class="dt">第三节 剩5.0秒</span>
                      
                    </div>

                    <div class="box-right">
                        <img src="./hupu-img/快船.jpg">
                        <span>快船</span>

                    </div>
                </div>
                <div class="Box">
                    <div class="box-left">
                        <span>勇士</span>
                        <img src="./hupu-img/勇士.jpg">
                    </div>
                    <div class="middle">
                        <div class="score">
                            <span class="lose">119</span>
                            <span>-</span>
                            <span class="win">125</span>
                        </div>
                        <span class="detail">22.6万人评分</span>
                    </div>

                    <div class="box-right">
                        <img src="./hupu-img/步行者.jpg">
                        <span>步行者</span>
                    </div>
                </div>
                <div class="Box">
                    <div class="box-left">
                        <span>骑士</span>
                        <img src="./hupu-img/骑士.jpg">
                    </div>

                    <div class="middle">
                        <div class="score">
                            <span class="win">105</span>
                            <span>-</span>
                            <span class="lose">90</span>
                        </div>
                        <span class="detail">1.4万人评分</span>
                    </div>
                    <div class="box-right">
                        <img src="./hupu-img/独行侠.jpg">
                        <span>独行侠</span>
                    </div>
                </div>

                <a class="bottom" href="#">
                    <div class="bottom-left">
                        <span>12月15日</span>
                        <span>今日全部比赛</span>
                    </div>
                    <div class="bottom-right">
                        <span>10场 ></span>
                    </div>
                </a>
            </div>

            <ul class="Box_middle">
<!-- 
                <li>
                        <img src="./hupu-img/赛程.png">
                        <p>赛程</p>
                </li>

                <li>
                    <img src="./hupu-img/球员榜.png">
                    <p>球员榜</p>
                </li>

                <li>
                    <img src="./hupu-img/湖人.jpg">
                    <p>主队</p>
                </li>

                <li>
                    <img src="./hupu-img/球队榜.png">
                    <p>球队榜</p>
                </li>

                <li>
                    <img src="./hupu-img/球星话题.jpg">
                    <p>球星话题</p>
                </li> -->
            </ul>

            <div class="Topic_title">

                <div class="topic_title">
                    <h3>热门话题</h3>
                </div>

            </div>
            <div class="Topic">
                <ul class="topic">
<!--                      <li>
                            <a href="#">
                                <p class="bold">#希罗准绝杀</p>
                            </a>
                        </li>  -->                      
                </ul>
            </div>

            <ul class="news_box">
                <li>

                    <div class="news">
                        <div class="news_title">
                            库里伤退勇士不敌步行者,小瓦格纳24分魔术击败老鹰
                        </div>
                        <div class="news_bottom">
                            <span>
                                <span class="comments">
                                    1850回复 / 80亮回复
                                </span>
                            </span>
                            <span>
                                <span class="news-top">专题</span>
                                <span class="news_top">置顶</span>
                            </span>
                        </div>
                    </div>
                    <div class="news_img">
                        <img src="./hupu-img/库里.jfif" class="img">
                    </div>

                </li>

                <li>
                    <div class="news">
                        <div class="news_title">
                            利拉德37分开拓者击败马刺,希罗准绝杀热火险胜雷霆
                        </div>
                        <div class="news_bottom">
                            <span>
                                <span class="comments">
                                    351回复 / 11亮回复
                                </span>
                            </span>
                            <span>
                                <span class="news-top">专题</span>
                                <span class="news_top">置顶</span>
                            </span>
                        </div>
                    </div>
                    <div class="news_img">
                        <img src="./hupu-img/米切尔.webp" class="img">
                    </div>
                </li>
            </ul>

           

        </div>

        <div class="tc">
             
        </div>


    </div>

 
    <nav class="bnav">
        <ul>
            <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye
                            "></use>
                    </svg>
                    <p>首页</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi
                            "></use>
                    </svg>
                    <p>专区</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_tianjia
                            "></use>
                    </svg>
                    <p></p>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangcheng
                            "></use>
                    </svg>
                    <p>商城</p>
                </a>
            </li>
            <li>
                <a href=".//wode.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wode
                            "></use>
                    </svg>
                    <p>我的</p>
                </a>
            </li>
        </ul>
    </nav>

    <script>
        var tab = document.getElementsByClassName("tab")[0];
        var tt = tab.querySelector(".tt");
        var span = tt.querySelectorAll("span");
        var tc = tab.querySelectorAll(".tc");
        console.log(tab, tt, span, tc);
        for (var i = 0; i < span.length; i++) {
            span[i].index = i;
            span[i].onmousedown = function () {
                for (var j = 0; j < tc.length; j++) {
                    tc[j].style.display = "none"
                    span[j].classList.remove("cur");
                }
                tc[this.index].style.display = "block";
                span[this.index].classList.add("cur");
            }
        }

        var tts = document.querySelectorAll(".tt span");
        window.onload = function () {
            for (var i = 0; i < tts.length; i++) {
                tts[i].onclick = function () {
                    for (var j = 0; j < tts.length; j++) {
                        tts[j].style.color = "#89909f";
                    }
                    this.style.color = "black";
                }
            }
        }


/*        var json = [{
                img: "./hupu-img/赛程.png",
                content: "赛程"
            },
            {
                img: "./hupu-img/球员榜.png",
                content: "球员榜"
            },
            {
                img: "./hupu-img/湖人.jpg",
                content: "主队"
            },
            {
                img: "./hupu-img/球队榜.png",
                content: "球队榜"
            },
            {
                img: "./hupu-img/球星话题.jpg",
                content: "球星话题"
            }
        ] */
        var url = "http://rap2api.taobao.org/app/mock/308770/user/content"
        var xhr = new XMLHttpRequest();

        xhr.open("GET", url, true);//get请求，url说明是yrl,true是异步
        xhr.send();
        xhr.onreadystatechange = function () {//监听成功
            if (xhr.readyState === 4 && xhr.status === 200) {//状态码为200
                console.log(xhr.responseText);
                var content = JSON.parse(xhr.responseText);
                //从服务器端获得数据在网页显示 JSON.parse()服务器端数据变成json
                insert(content);//insert这个名字是自己起名的
            }
        }
        function insert(jarr){
        var Box_middle = document.querySelector(".Box_middle");
        for (var v of jarr) {
            var nli = document.createElement("li");
            nli.innerHTML = `
                <a href="${v.link}">
                    <img src="${v.img}">
                    <p>${v.content}</p>
                </a>`;
            Box_middle.appendChild(nli);
        }
    }




        var json_topic = [{
                content: "#希罗准绝杀"
            }
        ]

        var topic = document.querySelector(".topic");
        for (var x of json_topic) {
            var nl = document.createElement("li");
            nl.innerHTML = `
                <a href="${x.link}">
                    <p>${x.content}</p>
                </a>`;
            topic.appendChild(nl);
        }

        var json_tuijian = [{
                tj_img:"./hupu-img/算法哥.jpg",
                tj_name:"算法基地",
                tj_content:"互联网校招算法专家",
                tj_button:"+关注",
                words_content1:"【算法哥】 一定要在面试前刷完这些必刷题！",
                words_tag1:"12.5万阅读/56回复",
                words_content2:"【算法哥】 希望计算机彦祖都能知道这些网站！ ",
                words_tag2:"11.7万阅读/46回复"
            },
            {
                tj_img:"./hupu-img/训练师.jpg",
                tj_name:"MicahLancaster迈卡",
                tj_content:"NBA知名训练师",
                tj_button:"+关注",
                words_content1:"【欧文报告】 第5集-半急停",
                words_tag1:"6.2万阅读/4回复",
                words_content2:"【欧文报告】 第4集:1-2停步 ",
                words_tag2:"11.2万阅读/41回复"
            },
            {
                tj_img:"./hupu-img/赛场小助手.jpg",
                tj_name:"赛场小助手",
                tj_content:"第一时间解读赛场热点",
                tj_button:"+关注",
                words_content1:"场场都是经典！你看过的最精彩的圣诞大战是哪一场",
                words_tag1:"28.6万阅读/155回复",
                words_content2:"在你心目中，最好看的圣诞球衣是哪一年的？ ",
                words_tag2:"44.6万阅读/178回复"
            }
        ]
        var tj_box=document.querySelector(".tc");
        for(var o of json_tuijian)
        {
            var nx = document.createElement("li");
            nx.innerHTML=`
            <div class="gz_Content">
            <div class="gz_content">
            <div class="gz_content_box_left">
                        <img src="${o.tj_img}" class="gz_content_box_img">
                        <ul>
                            <li>
                                <strong>${o.tj_name}</strong>
                            </li>
                            <li class="tag">${o.tj_content}</li>
                        </ul>
                    </div>
                    <div class="gz_content_box_right">
                        <span class="button">${o.tj_button}</span>
                    </div>
                </div>
                <ul class="words">
                    <li class="words_content">${o.words_content1}</li>
                    <li class="words_tag">${o.words_tag1}</li>
                    <li class="words_content">${o.words_content2}</li>
                    <li class="words_tag">${o.words_tag2}</li>
                </ul>
            </div>
                </div>
            `
            tj_box.appendChild(nx);
        }


         var json_news = [
            {
                news_title: "约基奇以85%命中率砍下至少40分10板5助5断,历史首人",
                comments: "18回复 /1亮回复",
                news_top: "置顶",
                news_img: "./hupu-img/约基奇.webp"
            }
        ] 

        
        var news_box = document.querySelector(".news_box");
        for (var y of json_news) {
            var na = document.createElement("li");
            na.innerHTML = `<div class="news">
                        <div class="news_title">
                            ${y.news_title}
                        </div>
                        <div class="news_bottom">
                            <span>
                                <span class="comments">
                                    ${y.comments}
                                </span>
                            </span>
                            <span>
                                <span class="news_top">${y.news_top}</span>
                            </span>
                        </div>
                    </div>
                    <div class="news_img">
                        <img src="${y.news_img}" class="img">
                    </div>`
            news_box.appendChild(na);
        }
        
        function toSaicheng(){
            window.location.href= "./saicheng.html";
        }
        function toWorld(){
            window.location.href= "./shijiebei.html";
        }
  

        /* 点赞 */
        var kongxin = document.querySelector(".icon-bottom-before");
        var shixin = document.querySelector(".icon-bottom-after");
   
  
        kongxin.onclick=function(){
        this.style.display = 'none';
        shixin.style.display = 'block';
      
     }
       
        shixin.onclick=function(){
        this.style.display = 'none';
        kongxin.style.display = 'block';
      
  }

    </script>
</body>

</html>